<template>
  <div class="mt-[-5px]">
    <div class="flex items-center">
      <div class="text-[18px] font-medium">告警提醒</div>
      <el-tag type="danger" class="ml-[16px] cursor-pointer" @click="reAlarmList" v-show="newAlarm != 0">
        <div class="flex items-center">
          <img class="h-[16px] w-[16px] mr-[4px]" src="@/assets/screenimg/alarmNotice.png" />
          当前有{{ newAlarm }}条新告警
        </div>
      </el-tag>
      <div class="flex-1 mr-[0px] flex items-center justify-end">
        <div class="mr-[16px]">
          <el-switch v-model="openSound" @change="openCloseSound" />
        </div>
        <div class="mr-[16px] text-[14px] text-[#d6d6d6] font-normal">开启声音</div>
        <div class="mr-[16px]">
          <el-switch v-model="closeAutoPopUp" @change="closeAutoPopUpChange" />
        </div>
        <div class="mr-[16px] text-[14px] text-[#d6d6d6] font-normal">关闭自动弹框</div>
        <div class="mt-[4px]">
          <el-icon>
            <Close />
          </el-icon>
        </div>
      </div>
    </div>

  </div>
</template>
<script setup lang="ts">
import { useDataDashboardThemeStoreHook } from '@/store/modules/data-dashboard-theme';
import { userKey } from '@/utils/auth';
import { message } from '@/utils/message';
import { Close } from '@element-plus/icons-vue';
import { storageLocal } from '@pureadmin/utils';
import { emitter } from '@/utils/mitt'

const emit = defineEmits(['reAlarmList'])
const closeAutoPopUp = ref(useDataDashboardThemeStoreHook().getCloseAutoPopUp())
const openSound = ref(false)
const audioElement = ref(null)
const newAlarm = ref(0)

watch(() => useDataDashboardThemeStoreHook().openSound, () => {
  openSound.value = useDataDashboardThemeStoreHook().openSound
}, {
  immediate: true,
  deep: true
})

onMounted(() => {
  newAlarm.value = 0
  emitter.on('alarmEvents', addNewAlarm)
})
onBeforeUnmount(() => {
  emitter.off('alarmEvents', addNewAlarm)
})
const addNewAlarm = (data) => {
  if (data?.message?.hasAlarm) {
    newAlarm.value++
  }
}
const closeAutoPopUpChange = () => {
  let userInfo = storageLocal().getItem(userKey).userInfo;
  if (userInfo?.isSuper == 1) {
    useDataDashboardThemeStoreHook().setCloseAutoPopUp(closeAutoPopUp.value)
  } else {
    message("仅超管可关闭自动弹窗", { type: "warning" })
  }

}
const openCloseSound = () => {
  useDataDashboardThemeStoreHook().openSound = openSound.value
  if (openSound.value) {
    if (!audioElement.value) {
      audioElement.value = document.createElement("audio");
      audioElement.value.src = '/src/assets/mp3/alarmAudio.mp3'
    }
    audioElement.value.play();
    audioElement.value.addEventListener('ended', () => {
      audioElement.value.play();
    })
  } else {
    if (audioElement.value) {
      audioElement.value.pause()
      audioElement.value.remove()
      audioElement.value = null
    }
  }
}
const closeSound = () => {
  if (audioElement.value) {
    audioElement.value.pause()
    audioElement.value.remove()
    audioElement.value = null
  }
}
const reAlarmList = () => {
  newAlarm.value = 0
  emit('reAlarmList')
}
defineExpose({
  closeSound
})
</script>
<style lang="scss" scoped></style>
